<template>
  <div
    class="E-better-scroll no-scroll-bar"
    :style="height ? `height:${height};` : 'flex-grow:1;'"
    v-scroll
  >
    <slot />
  </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  props: {
    height: String,
    updata: {}
  },
  watch: {
    updata() {
      setTimeout(() => {
        this.bScroll.refresh();
      }, 50);
    }
  },
  data() {
    return {
      bScroll: null
    };
  },
  directives: {
    scroll: {
      bind(el, bindings, vnode) {
        // eslint-disable-next-line no-underscore-dangle
        const _this = vnode.context;
        _this.bScroll = new BScroll(el, {
          scrollY: true,
          click: true,
          pullUpLoad: true,
          pullDownRefresh: true
        });
        // 上拉
        _this.bScroll.on('pullingUp', () => {
          _this.$emit('pullingUp');
        });
        // 下拉
        _this.bScroll.on('pullingDown', () => {
          _this.$emit('pullingDown');
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.E-better-scroll {
  overflow-y: scroll;
}
</style>
